import React, { Component } from 'react'
import axios from 'axios'

class Detail extends Component {

    state = {
        list: []
    }

    componentDidMount() {
        axios.get('/api/list').then((res) => {
            this.setState({
                list: res.data
            })
        })
    }

    goNext() {
        this.props.history.go(-1)
    }

    render() {
        let { location } = this.props
        let { list } = this.state
        console.log(location)
        return (
            <div>
                <h3 onClick={
                    this.goNext.bind(this)
                }>点击返回上一层</h3>
                {
                    location.state && list.map((item, index) => {
                        let id = item.children.findIndex(val => val.id === location.state.id)
                        if (id !== -1) {
                            return <li key={index}>
                                <img src={item.children[id].img} alt='' />
                                <p>{item.children[id].name}</p>
                            </li>
                        }
                    })
                }
            </div>
        )
    }
}

export default Detail;